<!--
* 功能：升级及apk下载弹窗
* 作者：huangzj
* 日期: 2021-05-28
-->
<template>
	<view class="mask">
		<!-- 升级文案弹窗布局 -->
		<view v-if="!startDownload" class="main-layout">
			<image class="version-iv" src="https://resource.ushopn7.com/tslm/uni-app/ic_version.png"></image>
			<view class="content-layout">
				<text class="title-tv">发现新版本</text>
				<text class="number-tv">{{ versionData.versionName }}</text>
				<scroll-view class="des-sv" scroll-y>
					{{ versionData.description }}
				</scroll-view>
				<view class="btn-layout">
					<view v-if="versionData.isForceUpdate != 1" class="cancel-btn" @click.stop="closePopup(true)">下次再说</view>
					<view class="confitm-btn" @click.stop="clickOnConfirm()">立即下载</view>
				</view>
			</view>
		</view>
		<!-- apk下载布局 -->
		<view v-if="startDownload" class="download-layout">
			<text style="width: 100%;font-size: 28rpx;">正在下载更新</text>
			<progress style="width: 100%; margin-top: 60rpx;" :percent="progress" activeColor="#2DCC70" stroke-width="5"></progress>
			<view class="flex-row align-center justify-between" style="margin-top: 10rpx; width: 100%;">
				<text>{{progress}}%</text>
				<text>{{progress}}/100</text>
			</view>
		</view>
	</view>
</template>

<script>
	import bus from '@/common/bus/bus.js';
	export default {
		data() {
			return {
				versionData: {
					description: '',
					versionName: '',
					isForceUpdate: 0
				},
				startDownload: false,
				progress: 0
			}
		},
		onLoad(options) {
			if (options.data) {
				this.versionData = JSON.parse(decodeURIComponent(options.data));
			}
		},
		onBackPress: function(event) {
			console.log(event);
			if (event.from === 'backButton' || event.from === 'backbutton') {
				return true;
			}
		},
		onReady() {
			// #ifdef APP-PLUS
			this.$mp.page.$getAppWebview().setStyle({
				backButtonAutoControl: 'none',
				background: "rgba(0, 0, 0, 0)",
				backgroundColorBottom: 'rgba(0, 0, 0, 0)',
				backgroundColorTop: 'rgba(0, 0, 0, 0)'
			})
			// #endif
		},
		methods: {
			closePopup(sendEmit = true) {
				if (sendEmit) {
					bus.emit('versionUpdate', true);
				}
				uni.navigateBack();
			},
			clickOnConfirm() {
				if (!this.versionData.updateUrl) {
					this.$api.msg('下载地址错误')
					return
				}
				if (uni.getSystemInfoSync().platform == "android") {
					this.startDownload = true;
					this.downloadFile();
				} else if (uni.getSystemInfoSync().platform == "ios") {
					plus.runtime.openURL(this.versionData.updateUrl);
					this.closePopup();
				}
			},
			downloadFile() {
				var downloadTask = uni.downloadFile({
					url: this.versionData.updateUrl,
					success: (res) => {
						if (res.statusCode === 200) {
							console.log('下载成功 ', JSON.stringify(res));
							plus.runtime.install(res.tempFilePath, {}, function(widgetInfo) {}, function(error) {
								uni.showToast({
									title: '安装失败',
									duration: 1500
								});
							})
							this.closePopup(false);
						}
					},
					fail: (err) => {
						console.log(JSON.stringify(err));
						if (this.versionData.isForceUpdate == 0) {
							this.closePopup();
						}
					}
				});
				downloadTask.onProgressUpdate((res) => {
					this.progress = res.progress;
				});
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: transparent;
	}

	.mask {
		position: fixed;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: rgba(0, 0, 0, 0.6);

		.main-layout {
			@extend %flex-y-c;
			width: 522rpx;

			.version-iv {
				width: 313rpx;
				height: 274rpx;
			}

			.content-layout {
				@extend %flex-y-c;
				width: 100%;
				background-color: $cfff;
				border-radius: 28rpx;
				margin-top: -187rpx;
				padding-bottom: 49rpx;
				font-family: PingFang SC;
				line-height: 1.2;

				.title-tv {
					color: $c333;
					font-size: 39rpx;
					font-weight: bold;
					margin-top: 215rpx;
				}

				.number-tv {
					border: 1px solid $cmain;
					height: 22rpx;
					border-radius: 11rpx;
					padding: 0 10rpx;
					margin-top: 14rpx;
					color: $cmain;
					font-size: 14rpx;
					line-height: 22rpx;
				}

				.des-sv {
					width: 440rpx;
					min-height: 60rpx;
					max-height: 210rpx;
					margin: 50rpx 0;
					color: $c666;
					font-size: 22rpx;
				}

				.btn-layout {
					@extend %flex-x-c;
					width: 100%;

					.cancel-btn {
						width: 210rpx;
						height: 68rpx;
						border-radius: 34rpx;
						border: 1px solid $cmain;
						color: $cmain;
						font-size: 26rpx;
						text-align: center;
						line-height: 68rpx;
						margin-right: 42rpx;
					}

					.confitm-btn {
						width: 210rpx;
						height: 68rpx;
						border-radius: 34rpx;
						background-color: $cmain;
						color: $cfff;
						font-size: 26rpx;
						text-align: center;
						line-height: 68rpx;
					}

				}

			}

		}

		.download-layout {
			@extend %flex-y-c;
			width: 500rpx;
			padding: 30rpx;
			background: $cfff;
			border-radius: 10rpx;
		}

	}
</style>
